<template>
	<view class="bind-pages">
		<view class="tips-item error">
			<view class="tips">尊敬的用户：</view>
			<view class="tips">经系统查询，您输入的承租人姓名、身份证号和租赁证编号对应的房屋已绑定他人手机号。</view>
			<view class="tips">如您需进行代缴或其他操作，可通过以下方式完成授权绑定：</view>
			<view class="tips">1.请承租人使用已绑定手机号接收验证码。</view>
			<view class="tips">2.您在本页面输入收到的验证码。</view>
			<view class="tips">3.统验证通过后，即可完成授权绑定。</view>
			<view class="tips">温馨提示：</view>
			<view class="tips">· 此方式仅适用于承租人已完成人脸识别的情况。</view>
			<view class="tips">· 输入验证码即代表承租人已授权您进行相关操作。</view>
			<view class="tips">· 请确保您已获得承租人授权，并妥善保管验证码信息。</view>
		</view>
		<view class="info-block">
			<view class="title">绑定手机号</view>
			<view class="text">请承租人使用已绑定手机号接收验证码</view>
			<view class="form-item">
				<image :src="imgStorage+'/login/phone.png'" class="form-icon"></image>
				<input placeholder="请输入手机号" v-model="form.wechatBoundPhone" class="form-crl" type="number"
					maxlength="11" disabled="true" />
			</view>
			<view class="form-item">
				<image :src="imgStorage+'/login/code.png'" class="form-icon"></image>
				<input placeholder="请输入验证码" v-model="form.smsVerificationCode" class="form-crl" type="number" />
				<view @click="getCaptcha" class="small-btn normal">{{btnText}}</view>
			</view>
		</view>
		<view class="btn normal" @click="getLogin">绑定</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js';
	import {
		getCaptchaApi,
		saveUserFwJoin
	} from '@/api/authentication.js'
	export default {
		data() {
			return {
				form: {
					wechatBoundPhone: '',
					smsVerificationCode: '',
					fwId: 0,
					identityType: 2
				},
				rule: {
					wechatBoundPhone: {
						name: '手机号',
						required: true
					},
					smsVerificationCode: {
						name: '验证码',
						required: true,
						validator: function(value, form, callback) {
							if (value.length != 4) {
								callback('请输入正确的验证码');
							}
							callback();
						}
					},
				},
				btnText: '获取验证码',
				seconds: 0,
			}
		},
		methods: {
			getCaptcha() {
				if (this.seconds == 0) {
					if (!this.form.wechatBoundPhone) {
						this.showToast('请先输入手机号码！');
						return false;
					}
					uni.showLoading({
						title: '发送中！',
						mask: true,
					})
					getCaptchaApi({
						mobile: this.form.wechatBoundPhone,
					}).then((res) => {
						uni.hideLoading()
						this.showToast('发送成功！');
						this.setCountDown(60)
					}).catch((res) => {
						uni.hideLoading()
						this.showToast('验证码发送失败！');
					})
				}
			},
			setCountDown(seconds) {
				let _this = this;
				this.countDown = setInterval(function() {
					seconds = seconds > 0 ? seconds - 1 : seconds;
					let sendCodeText = seconds > 0 ? `重新获取(${seconds}s)` : '获取验证码';
					_this.btnText = sendCodeText;
					_this.seconds = seconds;
					if (seconds == 0) {
						clearInterval(_this.countDown);
					}
				}, 1000)
			},
			getLogin() {
				if (validate(this.form, this.rule)) {
					uni.showLoading({
						title: '绑定中！',
						mask: true,
					})
					saveUserFwJoin(this.form).then((res) => {
						this.showToast('绑定成功！', () => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000)
					}).finally(() => {
						this.getCaptcha()
					})
				}
			}
		},
		onLoad(e) {
			this.form.fwId = e.id
			this.form.wechatBoundPhone = e.phone
		}
	}
</script>

<style lang="scss" scoped>
	.bind-pages {
		padding: 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;

		.error {
			background-color: $error-background;
			color: $theme-color;
		}

		.tips-item {
			padding: 30rpx;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			font-size: 30rpx;
			margin-bottom: 20rpx;

			.iconfont {
				margin-right: 20rpx;
			}

			.tips {
				line-height: 46rpx;
			}
		}

		.info-block {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;

			.title {
				font-size: 44rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			.text {
				color: #767676;
				font-size: 30rpx;
				line-height: 44rpx;
			}

			.form-item {
				display: flex;
				align-items: center;
				background-color: #f8f8f8;
				width: 100%;
				height: 100rpx;
				margin-top: 50rpx;
				padding: 0 30rpx;
				border-radius: 60rpx;

				.form-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 30rpx;
				}

				.small-btn {
					position: absolute;
					width: 210rpx;
					height: 70rpx;
					right: 90rpx;
				}
			}
		}

		.btn {
			width: 100%;
			height: 94rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;
			font-size: 34rpx;
		}
	}
</style>